<!DOCTYPE html>
<html>
<body>

<h1>The button Element</h1>

<button type="button" onclick="alert('Hello world!')">Click Me!</button>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维数组数据展示</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>

    <h2>二维数组数据展示到表格</h2>

    <!-- 表格容器 -->
    <table id="dataTable">
        <!-- 表头 -->
        <thead>
            <tr>
                <th>列 1</th>
                <th>列 2</th>
                <th>列 3</th>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody>
            <!-- 数据会动态插入在这里 -->
        </tbody>
    </table>

    <script>
        // 定义一个二维数组数据
        const data = [
            ['数据1', '数据2', '数据3'],
            ['数据4', '数据5', '数据6'],
            ['数据7', '数据8', '数据9']
        ];

        // 获取表格的tbody元素
        const tableBody = document.querySelector('#dataTable tbody');

        // 遍历二维数组并将每一行数据插入表格
        data.forEach(rowData => {
            const row = document.createElement('tr'); // 创建一个表格行
            rowData.forEach(cellData => {
                const cell = document.createElement('td'); // 创建一个表格单元格
                cell.textContent = cellData; // 设置单元格内容
                row.appendChild(cell); // 将单元格添加到行中
            });
            tableBody.appendChild(row); // 将行添加到表格的tbody中
        });
    </script>

</body>
</html>
 
</body>
</html>

